<template>
  <div class="comment">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :immediate-check="false"
      :finished="finished"
      @load="loadComments"
      finished-text="没有更多了"
    >
      <div
        class="item van-hairline--bottom van-hairline--top"
        v-for="com in comments"
        :key="com.com_id"
      >
        <van-image
          round
          width="1rem"
          height="1rem"
          fit="fill"
          :src="com.aut_photo"
        />
        <div class="info">
          <p>
            <span class="name">{{ com.aut_name }}</span>
            <span style="float: right">
              <span class="van-icon van-icon-good-job-o zan"></span>
              <span class="count">{{ com.like_count }}</span>
            </span>
          </p>
          <p>{{ com.content }}</p>
          <p>
            <span class="time">{{ com.pubdate | relaTime }}</span
            >&nbsp;
            <van-tag plain @click="openReply(com.com_id)"
              >{{ com.reply_count }} 回复</van-tag
            >
          </p>
        </div>
      </div>
    </van-list>
    <!-- 底部输入框 -->
    <div class="reply-container van-hairline--top">
      <van-field
        v-model="value"
        :placeholder="showReply ? '请输入要回复的内容' : '请对文章做出评论'"
      >
        <!-- 有赞的 loading组件 的submiting属性避免重复提交 -->
        <van-loading v-if="submiting" slot="button" type="spinner" size="16px">
        </van-loading>
        <span class="submit" v-else slot="button" @click="submit">提交</span>
      </van-field>
    </div>
    <!-- 回复vant弹层 -->
    <van-action-sheet v-model="showReply" class="reply_dailog" title="回复评论">
      <van-list
        v-model="reply.loading"
        :finished="reply.finished"
        finished-text="没有更多了"
      >
        <div
          class="item van-hairline--bottom van-hairline--top"
          v-for="index in 8"
          :key="index"
        >
          <van-image
            round
            width="1rem"
            height="1rem"
            fit="fill"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="info">
            <p><span class="name">一阵清风</span></p>
            <p>评论的内容，。。。。</p>
            <p><span class="time">两天内</span></p>
          </div>
        </div>
      </van-list>
    </van-action-sheet>
  </div>
</template>
<script>
import { getComments, commentOrReply } from '@/api/articleDetailAPI.js'
export default {
  data () {
    return {
      // 评论列表
      comments: [],
      // 评论列表加载中状态
      loading: false,
      // 评论列表完全加载完毕状态
      finished: false,
      // 输入的内容
      value: '',
      // 提交 评论或者回复 中
      submiting: false,
      // 偏移量给获取评论定义的请求参数
      offset: null,
      // 显示回复对话框
      showReply: false,
      // 回复相关数据
      reply: {
        loading: false,
        finished: false,
        replayList: []
      }
    }
  },
  activated () {
    // this.commentId = 100
    // console.log(this)
    // 每次重新激活都得重新调用获取文章品论的请求(因为评论每时每刻都在发)===>重置参数
    this.offset = null
    this.comments = []
    // 先释放完成状态(开启下拉加载load事件) 手动开启加载状态
    this.finished = false
    this.loading = true
    this.loadComments()
  },
  methods: {
    // 文章品论/用户回复===> 提交按钮
    async submit () {
      try {
        // 最最最最开始的是 判断提交的时候是否为空
        if (!this.value) return
        // 通过开启显示有赞loading组件防止重复提交
        this.submiting = true
        // 判断当前时 给文章提交评论 还是给评论提交回复
        if (this.showReply) {
          // 对话框提交回复
          const { data } = await commentOrReply(this.commentId, this.value, this.$route.parmas.id)
          this.reply.replayList.push(data)
          // 找到当前用户评论的id 让回复数量++
          const comment = this.comments.find(item => item.com_id === this.commentId)
          // 局部修改data数据里的对象===>评论数量++
          comment.reply_count++
        } else {
          // 对文章提交评论
          const { data } = await commentOrReply(this.$route.params.id, this.value)
          this.comments.unshift(data.new_obj)
        }
        // 请求完成(提交完成) 关闭loading组件 又可以继续提交了
        this.submiting = false
        // 清空表单输入的值===>数据驱动视图
        this.value = ''
      } catch (error) {
        this.submiting = false
        console.dir(error)
        this.submiting = false
        this.$roast.fail('提交失败')
      }
    },
    // 打开对文章评论的回复框
    openReply (id) {
      this.showReply = true
      // 重新设置 回复弹窗的 取消完成状态(释放load事件)并且开启加载状态
      this.reply.finished = false
      this.reply.loading = true
      // 清空偏移量
      this.offset = null
      // 清空回复列表
      this.reply.replayList = []
      // 把评论的id存到this上
      this.commentId = id
      //  调用获取回复列表的接口
      this.loadReply()
    },
    async loadReply () {
      const { data } = await getComments({
        type: 'c',
        source: this.commentId,
        offset: this.reply.offset
      })
      this.reply.list.push(...data.results)
      // 结束加载状态
      this.reply.loading = false
      // 判断是否还有数据
      if (data.last_id > data.end_id) {
        this.reply.offset = data.last_id
      } else {
        this.reply.finished = true
      }
    },
    async loadComments () {
      // 异步更新数据
      try {
        const { data } = await getComments({
          type: 'a',
          source: this.$route.params.id,
          offset: this.offset
        })
        console.log('请求文章评论数据', data)
        // 追加文章评论
        this.comments.push(...data.results)

        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.comments.length === data.total_count) {
          // 取消执行回调函数===>结束加载请求
          this.finished = true // 不再触发load事件
        } else {
          // 给偏移量赋值===>以便下一次加载
          // 准备下一页的请求启动
          this.offset = data.last_id
        }
      } catch (error) {
        console.dir(error)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.comment {
  margin-top: 10px;
  /deep/ .item {
    display: flex;
    padding: 10px 0;
    width: 100%;
    overflow: hidden;
    text-align: left;
    .info {
      flex: 1;
      padding-left: 10px;
      .name {
        color: #069;
      }
      .zan {
        vertical-align: middle;
        padding-right: 2px;
      }
      .count {
        vertical-align: middle;
        font-size: 10px;
        color: #666;
      }
      .time {
        color: #666;
      }
      p {
        padding: 5px 0;
        margin: 0;
      }
    }
  }
  /deep/ .van-button:active::before {
    background: transparent;
  }
}
.reply-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 44px;
  width: 100%;
  background: #f5f5f5;
  z-index: 9999;
  .submit {
    font-size: 12px;
    color: #3296fa;
  }
}
.van-popup--bottom {
  &.van-popup--round {
    border-radius: 0;
  }
}
.reply_dailog {
  height: 100%;
  max-height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  .van-action-sheet__header {
    background: #3296fa;
    color: #fff;
    .van-icon-close {
      color: #fff;
    }
  }
  .van-action-sheet__content {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px 44px;
  }
}
</style>
